<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>发改局</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- 主内容容器 -->
  <div class="content-wrapper">
    <!-- 容器头标题 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">

          <div class="col-sm-6">
            <h1 class="m-0">查看用户操作日志</h1>
          </div>

          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active">查看用户操作日志</li>
            </ol>
          </div>

        </div>

      </div>

    </div>

    <!-- 主题内容正文 -->
    <div class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-6">

            <div class="card card-primary">
              <!-- 卡片头部 -->
              <div class="card-header">
                <h3 class="card-title">查看用户操作日志</h3>
              </div>

              <!-- 表单开始 -->
              <form>
                <div class="card-body">

                    <div class="form-group">
                        <label for="date_id">选择你要查看的日期</label>
                        <input type="date" rows="20" class="form-control" id="date_id" value="" name="date" placeholder="选择你要查看的日期" />
                    </div>

                  <div class="form-group">
                    <label for="userlog_id">用户操作日志</label>
                    <textarea type="text" rows="20" class="form-control" id="userlog_id" placeholder="输出日志信息"></textarea>
                  </div>
                  <!-- 添加按钮 -->
                  <div class="form-group">
                    <button type="button" class="btn btn-primary" id="clear_btn">清空</button>
                  </div>

                </div>
              </form>

            </div>

          </div>

          <div class="col-lg-6">
          </div>

        </div>

      </div>

    </div>

  </div>


  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
  </aside>

  <!-- 版权信息 -->
  <footer class="main-footer">
    <strong>Copyright &copy; 2021 <a href="http://www.chengzhouyun.com/" target="_blank">ChengZhouYun</a>.</strong> All
    rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 1.0
    </div>
  </footer>

</div>

<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="../dist/js/adminlte.js"></script>

<!-- OPTIONAL SCRIPTS -->
<script src="../plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="../dist/js/pages/dashboard3.js"></script>
</body>
<script th:inline="javascript">

    $(document).ready(function () {

        // 新建系统时间
        var date = new Date();
        // 拼接格式字符串时间
        var month = "";
        var day = "";
        // 此处拼接0 是为了 input type=date 方式 不接收  7 接收 07方式
        if ((1+date.getMonth())<10){
          month = "0"+(1+date.getMonth());
        }
        if (date.getDate()<10){
          day = "0" + date.getDate();
        }else {
          day = date.getDate();
        }
        var strdata = date.getFullYear() + "-" + month + "-" + day;

        // 设置日期控件值
        $("#date_id").val(strdata);

        // 发起用户日志查看请求
        $.ajax({
            url:'/usrOp/log/'+ strdata,
            type:'get',
            dataType:'json',
            contentType:'application/json',
            success:function(res){

                if(res.statusCode == 200) {
                    // 成功返回将内容填充到textare中
                    $("#userlog_id").val(res.object);
                } else{
                    // alert(res.errorMsg);
                  console.log(res.errorMsg)
                }

            },
        })

        // 给日期选择控件注册更变事件
        $("#date_id").change(function(event){
            // 取日期控件的值
            var str = $("#date_id").val();

            // 发起ajax请求
            $.ajax({
                url:'/usrOp/log/'+ str,
                type:'get',
                dataType:'json',
                contentType:'application/json',
                success:function(res){

                    if(res.statusCode == 200) {
                        // 成功返回结果填充到textare中
                        $("#userlog_id").val(res.object);

                    } else{
                        alert(res.errorMsg);
                    }

                },
            })
        })

      // 清空日志
      $("#clear_btn").on("click",function(event){
        // 清除textare中的内容
        $("#userlog_id").val("");
      })


    })


</script>
</html>
